<script>
import { showToast, showSuccessToast, showConfirmDialog } from "vant";
import load from "@/components/public/load.vue";
import getTimeOut from "@/components/public/getTimeOut.vue";
import noData from "@/components/public/noData.vue";
import footcpm from "@/components/footcpm.vue";
import { getUserRecord, My, refund } from "@/http/api";
export default {
  components: { footcpm, load, getTimeOut, noData },
  name: "",
  data() {
    return {
      showTimeOut: false,
      showCont: false,
      userInfo: {},
      orderArr: [],
      page: 1,
      per_page: 10,
      last_page: 0,
      getting: false,
    };
  },
  props: {},
  setup() {},
  methods: {
    getRecord() {
      let data = {
        page: this.page,
        per_page: this.per_page,
      };
      getUserRecord(data)
        .then((res) => {
          if (res.data.code == 1) {
            let arr = res.data.data.data;
            for (let i = 0; i < arr.length; i++) {
              this.orderArr.push(arr[i]);
            }
            setTimeout(() => {
              this.getting = false;
            }, 100);
            this.last_page = res.data.data.last_page;
          } else {
            showToast(res.data.msg);
          }
        })
        .catch(() => {
          this.showTimeOut = true;
          this.showCont = true;
        });
    },
    returnFn(item) {
      showConfirmDialog({
        title: "退款操作提示",
        confirmButtonText: "确认退款",
        message: "确认退款此单支付？点击确认退款，管理员审核之后可进行退款",
      })
        .then(() => {
          refund({ id: item.id })
            .then((res) => {
              if (res.data.code == 1) {
                showSuccessToast("申请成功");
                item.examine_status = 2;
              } else {
                showToast(res.data.msg);
              }
            })
            .catch(() => {
              showToast("网络请求超时");
            });
        })
        .catch(() => {});
    },
    getData() {
      My()
        .then((res) => {
          if (res.data.code == 1) {
            this.userInfo = res.data.data;
          } else {
            showToast(res.data.msg);
          }
          this.showCont = true;
        })
        .catch(() => {
          this.showTimeOut = true;
          this.showCont = true;
        });
    },
    nextfn() {
      if (this.$route.path == "/user") {
        let h =
          document.documentElement.scrollHeight || document.body.scrollHeight;
        let wh =
          document.documentElement.clientHeight || document.body.clientHeight;
        let top = document.documentElement.scrollTop || document.body.scrollTop;
        let bottom = h - wh - top;
        if (bottom <= 50) {
          if (this.getting == false) {
            if (this.last_page > this.page) {
              this.getting = true;
              this.page++;
              this.getData();
            }
          }
        }
      }
    },
  },
  mounted() {
    window.addEventListener("scroll", this.nextfn);
  },
  created() {
    this.getRecord();
    this.getData();
  },
};
</script>
<template>
  <div class="container">
    <div class="showCont" v-if="!showTimeOut && showCont">
      <div class="headCont">
        <div class="userImg">
          <img :src="userInfo.head_img" />
        </div>
        <div class="userName">{{ userInfo.nick_name }}</div>
      </div>
      <div class="recordCont">
        <div class="recordHead">支付记录</div>
        <div class="recordMain">
          <div
            class="recordItem"
            :key="index"
            v-for="(item, index) in orderArr"
          >
            <div class="itemTop">
              <div class="itemNum">订单编号:{{ item.order_number }}</div>
              <!-- <div
                class="subBtn"
                @click="returnFn(item)"
                v-if="item.examine_status === 1"
              >
                申请退款
              </div>
              <div class="subBtn orgText" v-if="item.examine_status === 2">
                审核中
              </div>
              <div class="subBtn blueText" v-if="item.examine_status === 3">
                退款中
              </div>
              <div class="subBtn greenText" v-if="item.examine_status === 4">
                退款成功
              </div>
              <div class="subBtn redText" v-if="item.examine_status === 5">
                退款失败
              </div> -->
            </div>
            <div class="listUnder">
              <div class="itemTime">{{ item.pay_time }}</div>
              <div class="itemPrice">-¥{{ item.pay_money }}</div>
            </div>
            <div class="remarkText" v-if="item.examine_status == 5">
              退款失败：{{ item.reason }}
            </div>
            <div class="remarkText" v-if="item.examine_status == 3">
              {{ item.expected_to_time }}
            </div>
          </div>
        </div>
        <noData v-if="orderArr.length == 0"></noData>
      </div>
    </div>
    <load v-if="!showCont"></load>
    <getTimeOut v-if="showTimeOut"></getTimeOut>
    <footcpm></footcpm>
  </div>
</template>
<style scoped lang="less">
.container {
  min-height: 100vh;
  background-color: #fff;
  .showCont {
    padding-bottom: 3.5rem;
    box-sizing: border-box;
    .headCont {
      background-image: linear-gradient(to bottom, #05a165, #f3fdfc);
      padding: 3rem 4% 3rem;
      box-sizing: border-box;
      .userImg {
        text-align: center;
        img {
          width: 3.5rem;
          height: 3.5rem;
          border-radius: 50%;
          border: 0.15rem solid #fff;
        }
      }
      .userName {
        text-align: center;
        font-size: 0.8rem;
        font-weight: bold;
        margin-top: 0.5rem;
      }
      .userPhone {
        font-size: 0.6rem;
        text-align: center;
        color: #000;
        margin-top: 0.25rem;
      }
      .bindBtn {
        width: 10rem;
        text-align: center;
        line-height: 1.8rem;
        border: 1px solid #05a165;
        color: #05a165;
        font-size: 0.6rem;
        margin: 0 auto;
        border-radius: 2rem;
        margin-top: 0.5rem;
      }
    }
    .recordCont {
      background-color: #fff;
      width: 100%;
      border-radius: 0.75rem 0.75rem 0 0;
      margin-top: -1rem;
      padding: 1rem 4%;
      box-sizing: border-box;
      .recordHead {
        font-weight: bold;
        font-size: 0.75rem;
      }
      .recordMain {
        margin-top: 0.5rem;
        .recordItem {
          padding: 0.5rem 0;
          border-bottom: 1px dashed #ccc;
          line-height: 1rem;
          font-size: 0.65rem;
          .itemTop {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .subBtn {
              color: #999;
            }
            .greenText {
              color: #05a165;
            }
            .blueText {
              color: #86a9fb;
            }
            .redText {
              color: #ff5757;
            }
            .orgText {
              color: #e88563;
            }
          }
          .listUnder {
            display: flex;
            margin-top: 0.5rem;
            justify-content: space-between;
            align-items: center;
            .itemTime {
              color: #999;
            }
            .itemPrice {
              font-size: 0.75rem;
              color: #05a165;
            }
          }
          .remarkText {
            font-size: 0.6rem;
            margin-top: 0.5rem;
            color: #999;
          }
        }
      }
    }
  }
}
</style>
